<template>
  <div class="customer-selector">
    <h2>选择要查看的客户</h2>
    <p v-if="loading">正在加载客户ID列表...</p>
    <div v-else class="id-list">
      <div v-if="customerIds.length === 0">
        <p>没有找到可用的客户ID</p>
        <el-button type="primary" @click="fetchCustomerIds">重试</el-button>
      </div>
      <div v-else>
        <el-table :data="customerIds" style="width: 100%">
          <el-table-column label="客户ID">
            <template #default="scope">
              <el-link type="primary" @click="selectCustomer(scope.row)">
                {{ scope.row }}
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getCustomerIds } from '@/api/modules/customer'

const router = useRouter()
const loading = ref(true)
const customerIds = ref([])

// 获取客户ID列表
const fetchCustomerIds = async () => {
  loading.value = true
  try {
    const response = await getCustomerIds()
    if (response && response.success) {
      customerIds.value = response.results || []
      console.log('获取到的客户ID列表:', customerIds.value)
    } else {
      ElMessage.error(response?.message || '获取客户ID列表失败')
    }
  } catch (error) {
    console.error('获取客户ID列表错误:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 选择客户
const selectCustomer = (customerId) => {
  router.push(`/customer/detail/${customerId}`)
}

// 组件加载时获取数据
onMounted(() => {
  fetchCustomerIds()
})
</script>

<style scoped>
.customer-selector {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.id-list {
  margin-top: 20px;
}
</style> 